
<template>
<!-- 美团对账正常单    美团对账异常单 -->
    <div class="storeInfo">
        <div class="head">
            <el-form class="headForm">
                <el-form-item style="width:230px">
                    <el-date-picker
                        v-model="form.month"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="选择月份">
                    </el-date-picker>
                </el-form-item>
                
                <el-form-item label="">
                    <el-select clearable v-model="form.status" placeholder="状态">
                        <el-option v-for="item in payforlist" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <el-button type="danger" @click="search" >搜索</el-button> 
                <!-- <el-button class="btnTxt">结算金额合计:121231545元</el-button>  -->
                
            </el-form>
        </div> 
        
        <!-- table -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <!-- 								操作				 -->
                <el-table-column prop="month" label="日期" fixed></el-table-column>
                <el-table-column prop="store_name" label="门店" width="200"> </el-table-column>
                <el-table-column prop="provider_name" label="供应商" width="240"></el-table-column>
                <el-table-column prop="total_price" label="月结款项"></el-table-column>

                <el-table-column prop="settle_image" label="回执单">
                    <template slot-scope="scope">
                        <img v-if="scope.row.settle_image != 'https://img.meiktv.com/'" :src="scope.row.settle_image">
                        <p v-else>--</p>
                    </template>    
                </el-table-column>               
                <el-table-column prop="settle_time" label="输入结款时间"></el-table-column>
                <el-table-column prop="settle_status_cn" label="状态" ></el-table-column>

                <el-table-column prop="update_time" label="采购入库时间"></el-table-column>


                <el-table-column label="操作" prop="price_id" v-if="limitList.length>0">
                    <template  slot-scope="scope">            
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i >{{item.name}}</i>
                            <i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>
                </el-table-column>

            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
        

        <el-dialog title="确认结款" :visible.sync="dispostShow" class="business">
            <el-form :model="editForm">
                <!-- 'coverImg','coverPath','spantxt' -->
                <el-form-item>
                    <upload coverImg="" coverPath="" spantxt="结算凭证" v-on:throwFilePath="getImg"></upload>
                </el-form-item>
                <!-- remark -->
                <el-form-item label="打款日期" width="120px" class="picker">
                    <el-date-picker
                        v-model="editForm.settle_time"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="选择月份">
                    </el-date-picker>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dispostShow = false">取 消</el-button>
                <el-button type="primary" @click="comfirm">确 定</el-button>
            </div>
        </el-dialog>


    </div>
  
</template>
<style lang="scss" scoped>
.picker{
    display: flex;
    .el-form-item__content{
        flex-grow:1
    }
}
</style>
<style>
/* .picker .el-form-item__content{
    flex-grow:1
} */
</style>
<script>
import Vue from 'vue';
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
import upload from '../../pop/upload.vue';
export default {
   components:{
       upload,
   },
    data () {
    return {
        payforlist:[
            {status:'2',status_cn:"美团团购"},
            {status:'1',status_cn:"美团预订"}
        ],//美团类型
        resule:[
            {status:'正常',status_cn:'正常'},
            {status:'价格不一致',status_cn:'价格不一致'},
            {status:'订单状态不一致',status_cn:'订单状态不一致'},
            {status:'魅平台券码不正确',status_cn:'魅平台券码不正确'},
            {status:'美团用户违约金30%',status_cn:'美团用户违约金30%'},
            {status:'美团用户违约金100%',status_cn:'美团用户违约金100%'},
            {status:'违约金30%退款',status_cn:'违约金30%退款'},
            {status:'违约金100%退款',status_cn:'违约金100%退款'},
        ],
        form:{
            month:abc.getpremonth() ,//da,
            page:1,
            size:20,
        },
        limitList:[
            {url:'over',name:"确认结款"},
            {url:'detail',name:"明细"},
        ],
        tableData:[],
        total:50,
        size:20,
        pageNum:1,
        dialogTitle:'',//弹框的标题
        dispostShow:false,
        dialogdata:{

        },
        oprateRangetype:[
            {status:'-1',status_cn:"已取消"},
            {status:'3',status_cn:"已送达"},
        ], 
        lable1:'',
        editForm:{

        },  
        id:'', 
        editW:"150px",
        lable1txt:''    
    }
  }, 
   mounted(){
      let that = this;
      that.getList()
  },
  methods:{
    search(){
        let that = this;
        //搜索有问题，搜索2019-03数据和2019-04数据是一样的；-error
        that.getList()
    },
    changePage(val){
        var that = this;
        that.pageNum = val;
        that.form.page = val;
        that.getList()
    },
    theClick(url,a){
        let that = this;
        
        if(url == 'over'){
            that.dispostShow = true;
            that.editForm.settle_id = a.settle_id
        }else{
            console.log(a)
            that.$router.push({name:'/resultDetail',params:{settle_id:a.settle_id,date:a.month,title:a.store_name},path:'/resultDetail'})
        }
    },
    comfirm(){
        //（魅平台券码不正确）处理的接口总是修改失败；-error
        let that = this;
        let params = that.editForm;
        abc.post(that,potUrl.psettledonw,params,(res)=>{
            params = null;
            that.dispostShow = false;
            that.getList()
        })

    },
    getList(){
        let that = this;
        abc.get(that,potUrl.psettleindex,that.form,(res)=>{
            that.tableData=res.data.list;
            that.total = res.data.total;
        })//列表
    },
    getImg(data){
        let that = this;
        that.editForm.settle_image = data
        console.log(data)
    },
  }
}
</script>
